<template>
	<view class="content">
		<nav-bars title="收款" bgColor="transparent" isBack fontColor="#fff"></nav-bars>
		<view class="topBg">
			<image :src="`${baseimg}/static/superHK/topBg.png`" mode=""></image>
		</view>
		<!-- <view class="content-top">
			<image class="logo" src="@/static/logo.png"></image>
		</view> -->
		<view class="wrapBox">
		<view class="input-area" style="margin-top:60rpx;">
			<view class="input-box">
				<image class="icon-input" :src="`${baseimg}/static/pos/account.png`"></image>
				<input type="text" v-model="vspCusid" class="input-phone input" placeholder="请输入pos商户号" />
			</view>
			<view class="input-box line">
				<!-- <view class="iconfont icon-more icon-input"></view> -->
				<image class="icon-input" :src="`${baseimg}/static/pos/account.png`"></image>
				<input type="number" v-model="vspTermid" class="input-password input" placeholder="请输入pos终端号" />
			</view>
			<!-- <view class="find-pass" @click="goSkip('/pages/login/findPass')">忘记密码？</view> -->
		</view>
		<view class="login-btn" @click="userpos()">
			<view class="max-btn">确认绑定</view>
		</view>
		<view class="qrcode" @click="openurl()">
			<image :src="`${baseimg}/static/pos/qrcode.jpg`"></image>
			<text>扫码绑定</text>
		</view>
		</view>
	</view>
</template>

<script>
	import service_enter from '@/service/enter.js'
	export default {
		data() {
			return {
				vspCusid: '',
				vspTermid: '',
				baseimg: this.$static
			}
		},
		onLoad() {

		},
		methods: {
			userpos() {
				let that = this
				if (!this.vspCusid) {
					uni.showToast({
						title: '请输入pos机商户号',
						icon: 'none'
					});
					return
				}
				if (!this.vspTermid) {
					uni.showToast({
						title: '请输入pos机终端号',
						icon: 'none'
					});
					return
				}
				uni.showLoading()
				service_enter.posmake({
					vspCusid: this.vspCusid,
					vspTermid: this.vspTermid
				}).then(res => {
					if (res.code === 1) {
						uni.hideLoading()
						uni.showToast({
							title: '绑定成功!',
							duration: 2000
						});
						uni.navigateTo({
							url: '/pagesFour/home/home'
						})
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			//已绑定跳转个人中心
			goLogin() {
				let _this = this;
				setTimeout(function() {
					uni.navigateTo({
						url:'/pagesFour/home/home'
					})
				}, 500)
			},
			openurl() {
				let that = this
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						if (res.scanType == 'CODE_128') {
							console.log(res.result)
							that.vspCusid = res.result.slice(0, 15)
							that.vspTermid = res.result.slice(15, 24)
							console.log(that.vspCusid, that.vspTermid)
							uni.showToast({
								title: '获取设备信息成功',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: '未查到设备信息,请重新扫描！',
								duration: 2000
							});
						}
					},
					fail: function(res) {
						uni.showToast({
							title: '识别失败！',
							duration: 2000
						});
					}

				});

			},
			goSkip(url) {
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		// height:calc(100vh - 200px);
		// background-color: #FFFFFF;
	}

	.topBg {
		width: 100%;
		height: 340rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content-top {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.logo {
			height: 200rpx;
			width: 200rpx;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}
	}
   .wrapBox{
	    width: 100%;  
		height:calc(100vh - 200rpx);
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		background-color: #FFFFFF;
	   .input-area {
	   	width:84%;
		padding-top: 30rpx;
	   	height: auto;
	    margin:auto;
	   	.input-box {
	   		display: flex;
	   		align-items: center;
	   		margin-top: 80rpx;
	   		position: relative;
	   		padding-bottom: 20rpx;
	   		border-bottom: 1px solid #BFBFBF;
	   
	   		.input {
	   			font-size: 28rpx;
	   		}
	   		.right-text {
	   			display: inline-block;
	   			text-align: center;
	   			position: absolute;
	   			right: 20rpx;
	   			bottom: 0;
	   			line-height: 80rpx;
	   			color: #DBA954;
	   			z-index: 99;
	   		}
	   
	   		.icon-input {
	   			width: 36rpx;
	   			height: 36rpx;
	   			margin-right: 10rpx;
	   		}
	   	}
	   
	   	.find-pass {
	   		float: right;
	   		margin: 19rpx 0 10rpx 0;
	   		color: #E73A19;
	   		font-size: 26rpx;
	   	}
	   }
	   .login-btn {
	   	width: 100%;
	   	margin-top: 160rpx;
	   	color: #fff;
	   	.max-btn {
	   		width: 84%;
	   		height: 100rpx;
	   		margin: auto;
	   		text-align: center;
	   		line-height: 100rpx;
	   		background: #FF6042;
	   		border-radius: 90rpx;
	   	}
	   }
	   .qrcode {
	   	margin-top: 106rpx;
	   	display: flex;
	   	align-items: center;
	   
	   	image {
	   		width: 60rpx;
	   		height: 60rpx;
	   		margin-left: auto;
	   		margin-right: 10rpx;
	   	}
	   
	   	text {
	   		color: #323232;
	   		font-size: 26rpx;
	   		margin-right: 20rpx;
	   	}
	   }
   }
	

	
</style>
